<template>
  <div class="bg">
    <el-row>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item style="border-bottom: none;text-decoration: none" index="1">
          <router-link to="/index">
            <span style="font-size: 20px;font-family: 'Adobe 楷体 Std R',serif;font-weight: bolder">短链网</span>
          </router-link>
        </el-menu-item>
        <el-menu-item style="border-bottom: none;text-decoration: none;padding-left: 40%" index="2">帮助文档</el-menu-item>
        <el-menu-item style="border-bottom: none;text-decoration: none" index="3">开放API</el-menu-item>
        <el-menu-item style="float: right;border-bottom: none;text-decoration: none" index="3">

          <el-button @click="dialogVisible=true" type="primary">{{operation}}</el-button>

        </el-menu-item>
      </el-menu>
    </el-row>
    <el-row style="padding-top: 15%;padding-right: 20%;padding-left: 20%">
      <el-col :span="20">
        <el-input
          style="height: 50px;float: left"
          placeholder="请输入你要跳转的链接"
          v-model="longLink"
          clearable>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button :disabled="isDisableGen" @click="produceURL()" style="float: right" type="primary">{{genMsg}}
        </el-button>
      </el-col>
    </el-row>
    <el-row style="padding-top: 30px;padding-right: 20%;padding-left: 20%">
      <div style="text-align: center;border-style: double" v-if="shortInfo.url!==undefined">
        <div style="padding-top: 10px;padding-bottom: 7px">
          <label>短链：</label><label>
          <el-link type="success">{{shortInfo.url}}</el-link>
        </label>
          <label
            v-clipboard:copy="shortInfo.url"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError" style="padding-left: 15px;color: #f5794f">复制</label>
        </div>
        <el-image
          style="width: 100px; height: 100px"
          :src="shortInfo.qr"
          fit="fit"></el-image>
      </div>
    </el-row>


    <el-dialog
      :modal="false"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="1">
          <Login/>
        </el-tab-pane>
        <el-tab-pane label="注册" name="2">
          <Register/>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getToken} from '@/utils/auth'
  import {getTempShortInfo} from "@/api/api";
  import Register from "./register/register";
  import Login from "@/views/login/index"

  export default {
    name: "Index",
    components: {
      Register, Login
    },
    data() {
      return {
        activeName:"1",
        dialogVisible: false,
        countdown: 10,
        genMsg: '生成短链接',
        timer: null,
        isDisableGen: false,
        operation: '免费使用',
        hasToken: getToken(),
        activeIndex: '1',
        longLink: '',
        shortInfo: {
          url: undefined,
          qr: undefined,
          expireTime: undefined
        },

      }
    },
    created() {
      if (this.hasToken) {
        this.operation = '进入控制台'
      }
    },
    methods: {
      handleClose(){
        this.dialogVisible=false
      },
      handleClick(tab, event) {

      },
      handleConfirmUrl(rule, value, callback) {
        if (value) {
          let z_reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
          if (z_reg.test(value)) {
            callback()
          } else {
            callback('请输入正确的格式')
          }
        }
      },
      produceURL() {
        if (this.longLink === undefined || this.longLink === '') {
          this.$message({
            message: '请输入您的链接',
            type: 'warning'
          });
          return
        }
        //网址正则校验格式
        const reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
        if (!reg.test(this.longLink)) {
          this.$message({
            message: "请检查您输入的格式",
            type: "warning",
            offset: 60,
          });
          return
        }
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.countdown > 0 && this.countdown <= 10) {
              this.countdown--;
              if (this.countdown !== 0) {
                this.isDisableGen = true;
                this.genMsg = "重新生成(" + this.countdown + ")"
              } else {
                clearInterval(this.timer)
                this.genMsg = "生成短链接"
                this.countdown = 10
                this.timer = null
                this.isDisableGen = false
              }
            }
          }, 1000)
        }

        getTempShortInfo({url: this.longLink}).then(res => {
          this.shortInfo = res.data
          this.$message({
            message: '生成成功',
            type: 'success'
          });
        }).catch(e => {
          this.$message.error('生成失败');
        })
      },

      handleSelect() {

      },
      onCopy(e) { // 复制成功
        this.$message({
          message: '复制成功！',
          type: 'success'
        })
      },
      onError(e) {// 复制失败
        this.$message({
          message: '复制失败！',
          type: 'error'
        })
      }
    },

  }
</script>

<style scoped>
  .bg {
    background-image: url("../assets/b3.jpg");
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
  }
</style>
